<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main/_fragments :: header(~{::title},~{::link},~{::meta})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客后端管理页面</title>
    <!--引入markdown css-->
    <link rel="stylesheet" href="../../../static/markdown/css/editormd.css"
          th:href="@{/static/markdown/css/editormd.css}"/>
</head>
<body>

<!--头部导航-->
<div th:replace="main/_backEnd :: header_backEnd(1)"></div>

<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <a th:href="@{/admin/blog}" target="_blank" class="item">发布</a>
        <a th:href="@{/admin/blogs}" target="_blank" class="active teal item">列表</a>
    </div>
</div>

<!--中间内容   ctrl+enter先输入内容然后注释-->
<!--div +tab 快速补全代码-->
<div id="middle-content" class="m-container-small m-padded-tb-big">
    <div class="container">
        <form action="#" th:action="@{/admin/blog}" th:object="${blogBean}" method="post" class="ui form">
            <!--显示错误内容 前端校验 start-->
            <div class="field">
                <div class="ui error message"></div>
            </div>
            <!--显示错误内容 后端校验 start-->
            <!--/*/
                <div class="ui negative message" th:if="${#fields.hasErrors('title')}">
                    <p th:errors="*{title}"></p>
                </div>
                <div class="ui negative message" th:if="${#fields.hasErrors('content')}">
                 <p th:errors="*{content}"></p>
               </div>
                 <div class="ui negative message" th:if="${#fields.hasErrors('firstPicture')}">
                 <p th:errors="*{firstPicture}"></p>
                 </div>

                  <div class="ui negative message" th:if="${#fields.hasErrors('description')}">
                 <p th:errors="*{description}"></p>
                 </div>
            /*/-->
            <!--      end      -->


            <input type="hidden" name="id" th:value="*{id}">

            <input type="hidden" name="createTime" th:value="*{createTime}">
            <input type="hidden" name="views" th:value="*{views}">


            <div class="field">
                <div class="ui left labeled input">
                    <div class="ui selection dropdown">
                        <div class="default header basic">原创</div>
                    </div>
                    <input type="text" placeholder="标题" name="title" th:value="*{title}">
                </div>
            </div>

            <div class="field">
                <div id="test-markdown-view" style="z-index:1 !important;">
                    <textarea style="display:none;" name="content" placeholder="内容" th:text="*{content}"></textarea>
                </div>
            </div>

            <div class="fields two">
                <div class="field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="typeBean" th:value="*{typeBean == null} ? '' : *{typeBean.id}">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="each : ${categorys}" class="item" th:data-value="${each.id}"
                                     th:text="${each.name}"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui  left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui fluid multiple search selection dropdown">
                            <input type="hidden" name="tagBeans" value="6" th:value="${blogBean.formatTags()}">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div th:each="each : ${tagBeans}" class="item" th:data-value="${each.id}"
                                     th:text="${each.name}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


                <div class="inline fields">
                    <label>是否置顶：</label>
                    <div class="field">
                        <div class="ui radio checkbox">
                            <input type="radio" name="top" th:checked="*{top == 0}?true:false" value="0">
                            <label>否</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui radio checkbox">
                            <input type="radio" name="top" th:checked="*{top == 1}?true:false" value="1">
                            <label>是</label>
                        </div>
                    </div>
                </div>


            <div class="field">
                <div class="ui left labeled action input">
                    <textarea name="description" th:value="*{description}" th:text="${blogBean.description}"
                              placeholder="博客描述..." maxlength="200"></textarea>
                </div>
            </div>

            <div class="field">
                <input id="cert" type="file"/>
                <input type="button" value="上传" onclick="file_btn();"/>
            </div>

            <div class="field">
                <input type="hidden" name="firstPicture" id="firstPicture" th:value="*{firstPicture}">
                <img id="imageId" class="disabled medium ui image" style="height: 130px;width: 130px;"
                     th:src="*{firstPicture != null}?*{firstPicture}:@{/static/images/image.png}">
            </div>


            <div class="ui right aligned container">
                <button class="ui button" type="button" onclick="window.history.go(-1)">返回</button>
                <button class="ui teal button" type="submit">发布</button>
            </div>
        </form>

    </div>
</div>

<div th:replace="main/_fragments :: toTop"></div>
<!--尾部-->
<footer th:replace="main/_fragments :: footer"></footer>


<!--引入js-->
<th:block th:replace="main/_fragments :: script"></th:block>
<!--引入markdownjs-->
<script src="../../../static/markdown/editormd.js" th:src="@{/static/markdown/editormd.js}"></script>
<script src="../../../static/markdown/lib/marked.min.js" th:src="@{/static/markdown/lib/marked.min.js}"></script>
<script src="../../../static/markdown/lib/prettify.min.js" th:src="@{/static/markdown/lib/prettify.min.js}"></script>

<script>
    var testEditor;

    // markdown 初始化
    testEditor = editormd("test-markdown-view", {
        width: "100%",
        height: 640,
        syncScrolling: "single",
        path: "/static/markdown/lib/",
        //开启图片上传
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
        imageUploadURL: "https://zhaoguangxiao.top/admin/upload_context",//后端图片上传的服务地址
    });


    //下拉框
    $('.ui.dropdown').dropdown();

    // 表单验证
    $('.ui.form')
        .form({
            fields: {
                title: {
                    identifier: 'title',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章标题不能为空'
                        }
                    ]
                },
                content: {
                    identifier: 'content',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章内容不能为空'
                        }
                    ]
                },
                typeBean: {
                    identifier: 'typeBean',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章分类不能为空'
                        }
                    ]
                },
                tagBeans: {
                    identifier: 'tagBeans',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章标签不能为空'
                        }
                    ]
                },
                firstPicture: {
                    identifier: 'firstPicture',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章首图不能为空'
                        }
                    ]
                },
                description: {
                    identifier: 'description',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '文章描述不能为空'
                        }
                    ]
                }
            }
        });

    /**
     * 异步文件上传
     */
    function file_btn() {
        if (document.getElementById("cert").value == null || document.getElementById("cert").value == "") {
            alert("请选择上传文件");
        } else {
            var type = "file";          //后台接收时需要的参数名称，自定义即可
            var id = "cert";            //即input的id，用来寻找值
            var formData = new FormData();
            formData.append(type, $("#" + id)[0].files[0]);    //生成一对表单属性
            $.ajax({
                type: "POST",           //因为是传输文件，所以必须是post
                url: '/admin/upload',         //对应的后台处理类的地址
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (null != response) {
                        $("#firstPicture").val(response);
                        $("#imageId").attr("src", response);
                    } else {
                        alert("文件上传失败")
                    }
                }
            });
        }
    }

</script>
</body>
</html>